<template>
  <div class="index-list">
    <!-- 轮播图 -->
    <div class="banners">
      <img src="http://static.huruqing.cn/fresh/banner1.jpeg" />
    </div>

    <!-- 推荐图标 -->
    <div>
      <div class="reccomd flex aic bg-fff jc-sa">
        <router-link to="" class="item flex2 aic jc-c">
          <img src="http://static.huruqing.cn/fresh/banner1.jpeg" alt />
          <span class="mt-10">农产品</span>
        </router-link>
        <router-link to="" class="item flex2 aic jc-c">
          <img src="http://static.huruqing.cn/fresh/banner1.jpeg" alt />
          <span class="mt-10">农产品</span>
        </router-link>
        <router-link to="" class="item flex2 aic jc-c">
          <img src="http://static.huruqing.cn/fresh/banner1.jpeg" alt />
          <span class="mt-10">农产品</span>
        </router-link>
        <router-link to="" class="item flex2 aic jc-c">
          <img src="http://static.huruqing.cn/fresh/banner1.jpeg" alt />
          <span class="mt-10">农产品</span>
        </router-link>
        <router-link to="" class="item flex2 aic jc-c">
          <img src="http://static.huruqing.cn/fresh/banner1.jpeg" alt />
          <span class="mt-10">农产品</span>
        </router-link>
        <router-link to="" class="item flex2 aic jc-c">
          <img src="http://static.huruqing.cn/fresh/banner1.jpeg" alt />
          <span class="mt-10">农产品</span>
        </router-link>
        <router-link to="" class="item flex2 aic jc-c">
          <img src="http://static.huruqing.cn/fresh/banner1.jpeg" alt />
          <span class="mt-10">农产品</span>
        </router-link>
        <router-link to="" class="item flex2 aic jc-c">
          <img src="http://static.huruqing.cn/fresh/banner1.jpeg" alt />
          <span class="mt-10">农产品</span>
        </router-link>
      </div>
    </div>

    <!-- 秒杀和拼团 -->
    <div class="pintuan flex jc-sa bg-fff aic">
      <router-link to="" to="/activity/seckill" class="l rel pl-10">
        <span class="abs title">秒杀</span>
        <div class="flex jc-sa aic h100pc">
          <div class>
            <p class="f14">秒杀</p>
            <p class="f999 f10 mt-5">超值惊喜</p>
            <p class="kanjia mt-5 f12 fff">立即砍价</p>
          </div>
          <img class="img" src="~@/assets/img/miaosha-icon.png" alt />
        </div>
      </router-link>

      <router-link to="" to="/activity/groupBuy" class="r rel pl-10">
        <span class="abs title">拼团</span>
        <div class="flex jc-sa aic h100pc">
          <div class>
            <p class="f14">拼团</p>
            <p class="f999 f10 mt-5">限时拼团</p>
            <p class="kanjia mt-5 f12 fff">一键拼团</p>
          </div>
          <img class="img" src="~@/assets/img/pintuan-icon.png" alt />
        </div>
      </router-link>
    </div>

    <!-- 领取优惠券 -->
    <router-link to="" to="/coupon" class="coupon flex jc-sb aic fff f14 ml-10 mr-10">
      <p class="l flex aic">
        <i class="iconfont icon-coupon f18 ml-5"></i>
        <span class="ml-5">超值福利</span>
        <span class="ml-5 mr-5">|</span>
        <span>全场满减</span>
      </p>
      <p class="r flex aic pr-10">
        <span>立即领取</span>
        <i class="iconfont icon-iconfontyoujiantou-copy-copy-copy-copy fff"></i>
      </p>
    </router-link>

    <van-sticky :offset-top="-10">
      <ul class="navagater bg-fff mt-10">
        <li>推荐</li>
        <li class="sales">
          <span>销量</span>
          <div class="van-icon-style">
            <van-icon name="arrow-up" />
            <van-icon name="arrow-down" />
          </div>
        </li>
        <li class="sales">
          <span>价格</span>
          <div class="van-icon-style">
            <van-icon name="arrow-up" />
            <van-icon name="arrow-down" />
          </div>
        </li>
      </ul>
    </van-sticky>

    <!-- 商品列表 -->
    <van-list class="product-list fww flex jc-sa bg-fff pt-15 pb-60">
      <router-link to="/product/detail" class="item ova">
        <img
          class="img"
          alt
          src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png"
        />
        <div style="height: 78px" class="bg-fff flex2 lh15 mt-10">
          <p class="f14 ovt lh15">
            【山东】金秋红蜜桃 基地果园现摘现发 鲜甜红润肉
          </p>
          <p class="f12 ovt lh15">基地果园现摘现发 鲜甜红润肉</p>
          <div class="lh15 flex jc-sb aic">
            <p>
              <span class="f10 red">￥</span> <span class="f15 red">57.80</span>
            </p>
            <p>
              <span class="f10 f999">销量</span>
              <span class="f999 f14 pr-5">: 9998</span>
            </p>
          </div>
        </div>
      </router-link>
      <router-link to="" class="item ova">
        <img
          class="img"
          alt
          src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png"
        />
        <div style="height: 78px" class="bg-fff flex2 lh15 mt-10">
          <p class="f14 ovt lh15">
            【山东】金秋红蜜桃 基地果园现摘现发 鲜甜红润肉
          </p>
          <p class="f12 ovt lh15">基地果园现摘现发 鲜甜红润肉</p>
          <div class="lh15 flex jc-sb aic">
            <p>
              <span class="f10 red">￥</span> <span class="f15 red">57.80</span>
            </p>
            <p>
              <span class="f10 f999">销量</span>
              <span class="f999 f14 pr-5">: 9998</span>
            </p>
          </div>
        </div>
      </router-link>
      <router-link to="" class="item ova">
        <img
          class="img"
          alt
          src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png"
        />
        <div style="height: 78px" class="bg-fff flex2 lh15 mt-10">
          <p class="f14 ovt lh15">
            【山东】金秋红蜜桃 基地果园现摘现发 鲜甜红润肉
          </p>
          <p class="f12 ovt lh15">基地果园现摘现发 鲜甜红润肉</p>
          <div class="lh15 flex jc-sb aic">
            <p>
              <span class="f10 red">￥</span> <span class="f15 red">57.80</span>
            </p>
            <p>
              <span class="f10 f999">销量</span>
              <span class="f999 f14 pr-5">: 9998</span>
            </p>
          </div>
        </div>
      </router-link>
      <router-link to="" class="item ova">
        <img
          class="img"
          alt
          src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png"
        />
        <div style="height: 78px" class="bg-fff flex2 lh15 mt-10">
          <p class="f14 ovt lh15">
            【山东】金秋红蜜桃 基地果园现摘现发 鲜甜红润肉
          </p>
          <p class="f12 ovt lh15">基地果园现摘现发 鲜甜红润肉</p>
          <div class="lh15 flex jc-sb aic">
            <p>
              <span class="f10 red">￥</span> <span class="f15 red">57.80</span>
            </p>
            <p>
              <span class="f10 f999">销量</span>
              <span class="f999 f14 pr-5">: 9998</span>
            </p>
          </div>
        </div>
      </router-link>
    </van-list>

    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../components/Footer.vue";
import Banner from "./list/Banner";
export default {
  name: "productList",
  data() {
    return {};
  },

  components: {
    Footer,
    Banner,
  },
};
</script>

<style lang="less">
@import "./list.less";
.reccomd {
  .item {
    width: 22%;
  }
  flex-wrap: wrap;
}
</style>